<template>
	<view class="content">
		<view class="top">
			<text>猪舍管理</text>
			<!-- <text>您可以调节猪场的温度、湿度、风量、细菌</text> -->
		</view>
		
		<view class="btns">
			<view class="row">
				<view class="btn">
					<image src="../../../static/images/male.png" mode=""></image>
					<text>公猪管理</text>
				</view>
				<view class="btn">
					<image src="../../../static/images/female.png" mode=""></image>
					<text>母猪管理</text>
				</view>
			</view>
			<view class="row">
				<view class="btn">
					<image src="../../../static/images/b_pig.png" mode=""></image>
					<text >商猪管理</text>
				</view>
				<view class="btn">
					<image src="../../../static/images/material.png" mode=""></image>
					<text>物料管理</text>
				</view>
			</view>
			<view class="row">
				<view class="btn">
					<image src="../../../static/images/health.png" mode=""></image>
					<text>免疫保健</text>
				</view>
				<view class="btn">
					<image src="../../../static/images/money.png" mode=""></image>
					<text>费用录入</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.content{
		padding: 0;
	}
	.top{
		width: 100%;
		height: 111px;
		padding-top: 7%;
		padding-left: 6%;
		background: linear-gradient(to right, #1d6efb , #42beff);
		box-shadow: #000000 0px 5px 33px;
	}
	.top text{
		
		color: #FFFFFF;
		font-size: 30px;
	}
	
	.btns{
		display: flex;
		flex-direction: column;
		margin-top: 11%;
	}
	.row{
		display: flex;
		margin-top: 5%;		
	}
	.btn{
		display: flex;
		flex-direction: column;
		margin-left: 20%;
	}
	.btn image{
		width: 70px;
		height: 70px;
		margin-bottom: 15%;
	}
	.btn text{
		text-align: center;
	}
</style>
